<template>
  <div class="BoxTwo">
      <h2 class="BoxTwo-Title ">热门商品</h2>
      <ul class="BoxTwo-List">
          <li  v-for="(item,index) of productCategory" :key="index+'BoxTwo-List_li'" @mouseenter="Mouseenter"  :class="index == 0?'BoxTwo-List_li':''" >{{item}}</li>
          
          <!-- <li>{{this.showList[1].title}}</li>
          <li>{{this.showList[2].title}}</li>
          <li>{{this.showList[3].title}}</li>
          <li>{{this.showList[4].title}}</li> -->
      </ul>
      <ul class="BoxTwo-Img">
          <router-link tag="li" v-for="(item,index) of showImgList" :key="index+'BoxTwo-Img'" :in="item.index" :to="'/detail?id='+item.index">
              <img :src="item.imgUrl" alt="" width="100%" height="100%">
              <div class="BoxTwo-Img-price">￥{{item.price}}</div>
          </router-link>
      </ul>
  </div>
</template>

<script>
import axios from "axios"
export default {
  name: 'BoxTwo',
  data(){
      return{
          "productCategory": ["女装","男装","鞋"],
          "ImgList": [],
          "showList": [],
          "showImgList": [],
          "AllhomeList": [],
          "fool_4": []
      }
    },
    beforeMount(){
        let This = this;
        axios.post('/product/getListRecommended',{Recommended:4})
      .then(function (response) {
          console.log(response,"这是后台返回的数据");
          This.AllhomeList = response.data.data;
          let len = This.AllhomeList.length;
          for(let i=0;i<len;i++){
              if(This.AllhomeList[i].productCategory == "女装"){
                  This.showImgList.push({imgUrl:'/static/'+This.AllhomeList[i].Source + "/product_home/1.jpg",index:This.AllhomeList[i].fromId
,price:This.AllhomeList[i].productPrice});
              }    
          }
          console.log(This.showImgList,"这是列表对应图片");
        //   const $showBox = $(".BoxTwo-List>li");
        //   console.log($showBox,"这是获取的节点");
        //   $showBox.mouseenter(function(){
            
        //     $(this).addClass("BoxTwo-List_li").siblings().removeClass("BoxTwo-List_li");
        //     })
      })
      .catch(function (error) {
      });
    },
    mounted(){
        
        
        
    },
    methods: {
        Mouseenter(el){
            $(el.target).addClass("BoxTwo-List_li").siblings().removeClass("BoxTwo-List_li");
            this.showImgList = [];
            let len = this.AllhomeList.length;
            let index = $(el.target).index()
            
            for(let i=0;i<len;i++){
              if(this.AllhomeList[i].productCategory == this.productCategory[index]){
                  this.showImgList.push({imgUrl:'/static/'+this.AllhomeList[i].Source + "/product_home/1.jpg",index:this.AllhomeList[i].fromId
,price:this.AllhomeList[i].productPrice});
              }    
            }
        }
    }

}
</script>
<style lang="stylus" scoped>
    .BoxTwo
        position: absolute;
        margin: 0 auto;
        box-sizing: border-box;
        top: 720px;
        left: 0;
        right: 0;
        width: 1192px;
        height: 430px;
        .BoxTwo-Title
            font-size: 22px;
            color: #333;
            text-align: left;
            line-height: 50px;
            font-weight: 600;
        .BoxTwo-List
            display: flex;
            flex-flow: row nowrap;
            width: 100%;
            height: 50px;
            border-bottom: 2px solid #fb658a;
            background: #fff;
        .BoxTwo-List>li
            position: relative;
            width: 20%;
            height: 100%;
            font-size: 16px;
            line-height: 50px;
        .BoxTwo-List_li
            background: #fb658a;
            color: #fff;
        .BoxTwo-List_li::after
            position: absolute;
            margin: 0 auto;
            top: 50px;
            left: 0;
            right: 0;
            content: '.';
            font-size: 0;
            width: 0;
            height: 0;
            border-top: 6px solid #fb658a;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid transparent;
            opacity: 1;
        .BoxTwo-Img
            margin-top: 10px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            width: 100%;
            height: 334px;
        .BoxTwo-Img>li
            position: relative;
            width: 220px;
            height: 100%;
            overflow: hidden;
        .BoxTwo-Img>li>img
            text-align: center;
            transition: .5s;
        .BoxTwo-Img>li:hover>img
            transform:scale(1.2)
        .BoxTwo-Img>li>.BoxTwo-Img-price
            position: absolute;
            bottom: 0;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            line-height: 40px;
            color: #fb658a;
            width: 100%;
            height: 40px;
            background: rgba(255,255,255,.7);
        
</style>